<template>
  <div class="dashboard-container">
    <div><p style="font-size: larger">文档管理</p></div>
    <el-divider></el-divider>
    <el-upload
      class="upload-demo"
      action="http://localhost:8084/pro-file/uploadProjectFiles"
      multiple
      :data="{'proId':projectId}"
      :limit="3"
      :on-success="uploadSuccess"
      :show-file-list=false
      :file-list="fileList">
      <el-button class="proButton">上传文档</el-button>
    </el-upload>
    <!--  表格开始  -->
    <el-table
      :data="fileList"
      style="width: 100%">
      <el-table-column
        label="文件名称"
        prop="fileName">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <!--handleEdit()editRole(scope.row)editRole(scope.row)-->
          <span @click="download(scope.row)"><el-link type="primary" :underline="false">下载</el-link></span>
          <el-divider direction="vertical"></el-divider>
          <span @click="deleteFile(scope.$index, scope.row)"><el-link type="danger" :underline="false">删除</el-link></span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        class="pagination"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        prev-text="上一页"
        next-text="下一页"
        layout="total, prev, pager, next"
        :total="this.fileList.length">
      </el-pagination>
    </div>
  <!--  弹出框  -->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      width="30%">
      <span>
        <el-result icon="warning" title="确定要删除？">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="dialogSureDelete">确认</el-button>
            <el-button size="medium" @click="deleteDialogVisible = false">取消</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { deleteProjectFile, getProjectFiles } from '@/api/project-file'
  

  export default {
    name: 'documentManagement',
    data(){
      return{
        pagesize: 7,                //分页每一页的数目
        currentPage: 1,             //标记当前的在第几页
        fileList: [],                //文件集合
        deleteDialogVisible: false,       //删除时的弹出框
        judgDelete: '',                   //判断是否执行删除的值
      }
    },
    computed:{
      ...mapGetters(["projectId"])
    },
    methods:{
      //分页条改变时调用的方法
      handleCurrentChange(val) {
        this.currentPage = val
        this.getProjectFiles()
      },
      //点击删除调用的方法
      deleteFile(index,row){
        this.judgDelete = row;
        this.deleteDialogVisible = true;
      },
      //确定删除调用的方法
      dialogSureDelete(){
        deleteProjectFile(this.judgDelete.id).then(res =>{
          this.$message({type: 'success',message: res.msg})
          this.$router.go(0)
        })
        this.deleteDialogVisible = false;
      },
      //获取项目文件集合的方法
      getProjectFiles(){
        let page = {"current":this.currentPage,"size":this.pagesize}
        getProjectFiles(page,this.projectId).then(res =>{
          if (res.data.records.length !== 0){
            this.fileList = res.data.records
          }
        })
      },
      //下载文件
      download(row){
        window.open(row.fileAccessPath,'_blank')
      },
      //文件上传成功
      uploadSuccess(){
        this.getProjectFiles()
        this.message({type: 'success',message:'上传成功'})
      }
    },
    mounted(){
      this.getProjectFiles()
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    margin-top: 20px;
    margin-right: 10px;
    text-align: right;

    ::v-deep .el-pagination__jump {
      float: left;
    }
  ;

    ::v-deep .el-pagination__total {
      float: left;
    }
  ;

    ::v-deep .el-pagination__sizes {
      float: left;
    }
  }
</style>
